<template>
    <!-- 商品基本信息内容区 -->
    <div class="content">
        <div style="width: 300px; height: 300px; border: 4px red solid;">
            <el-image 
                style="width: 100%; height: 100%;" 
                :src="goods?.image"
                fit="cover"
            />
        </div>
        <div style="margin-left: 20px;">
            <div style="font-weight: 900; font-size: 30px;">
                {{ goods?.name }}
            </div>
            <div style="font-size: 15px;">
                {{ goods?.description }}
            </div>
            <div style="background-color: azure; width: 500px; height: 100px; margin-top: 20px; padding: 10px;">
                <div style="font-size: 35px; color: red;">
                    惊喜折扣价：{{ goods?.discounted_price }}￥
                </div>
                <div style="font-size: 15px; margin-top: 10px;">
                    原价：{{ goods?.price }}￥
                </div>
                <div style="margin-top: 15px; color: #555555;">
                    库存：{{ goods?.stock }}件
                </div>
                <div style="margin-top: 10px;">
                    <el-input-number 
                        v-model="buyCount"
                        :min="0"
                        :max="goods?.stock ?? 0"
                    />
                    <el-button 
                        type="primary"
                        style="margin-left: 20px;"
                        :disabled="buyCount === 0"
                        @click="addToCart"
                    >
                        加入购物车
                    </el-button>
                </div>
                <div style="font-size: 13px; margin-top: 10px; color: gray;">
                    温馨提示：商品有任何质量问题无条件退换
                </div>
            </div>
        </div>
    </div>
    <!-- 商品详情与评价内容区 -->
    <div>
        <el-tabs
            type="card"
            class="demo-tabs"
            style="margin-top: 40px;"
        >   
            <el-tab-pane label="商品详情">
                <div
                    v-html="goods?.detail"
                    class="editor-content-view"
                />
            </el-tab-pane>
            <el-tab-pane label="商品评价">评价组件</el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { RequestPath, startRequest } from '../base/RequestWork';
import { ElMessage } from 'element-plus';

// 商品id
const props = defineProps<{
    id: number
}>();
// 商品详情数据
const goods = ref();
// 购买的商品件数
const buyCount = ref(0);
// 加载组件时获取商品数据
onMounted(() => {
    loadGoods()
});
const loadGoods = () => {
    startRequest(RequestPath.goodsGet, 'get', {
        id: props.id
    }).then((response) => {
        goods.value = response.data.datas[0];
    }).catch((error) => {
        ElMessage.error({
            message: error.response.data.error
        });
    });
}
// 添加购物车的方法，暂时空实现
const addToCart = () => {
    
}
</script>
<style scoped>
    .content {
        display: flex;
        flex-direction: row;
        margin-top: 20px;
    }
</style>